<template>
  <div class="goods-container">
    <div class="tabs-fixed">
      <van-tabs v-model:active="activeTab" @change="onTabChange" sticky>
        <van-tab v-for="tab in tabs" :title="tab.name" :key="tab.id">
          <div class="goods-scroll-area">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div class="goods-list">
                <div
                  v-for="item in goodsList"
                  :key="item.id"
                  class="goods-card"
                  @click="goDetail(item.id)"
                >
                  <div class="goods-img-box">
                    <img :src="item.img" class="goods-img" />
                  </div>
                  <div class="goods-info">
                    <div class="goods-title">{{ item.title }}</div>
                    <div class="goods-row">
                      <span class="goods-price">{{ item.price }}元</span>
                      <span class="goods-sales">{{ item.sales }}人付款</span>
                    </div>
                    <div class="goods-tags-row">
                      <span class="goods-tag quality">质量</span>
                      <span class="goods-tag stock">有货</span>
                      <span class="goods-tag count">{{ item.stock }}个</span>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const tabs = [
  { id: 1, name: '闲鱼' },
  { id: 2, name: '抖音' },
  { id: 3, name: '小红书' },
  { id: 4, name: '视频号' },
  { id: 5, name: '快手' },
]
const activeTab = ref(0)

const goodsList = ref([
  {
    id: 1,
    img: 'https://img.yzcdn.cn/vant/cat.jpeg',
    title: '鱼儿想要-*50个',
    price: 1.74,
    stock: 50,
    sales: 422,
    discount: '8.5折',
  },
  {
    id: 2,
    img: 'https://img.yzcdn.cn/vant/cat.jpeg',
    title: '闲鱼币10亿',
    price: 0.01,
    stock: 100,
    sales: 1000,
    discount: '8.5折',
  },
])
const loading = ref(false)
const finished = ref(false)

function goDetail(id: number) {
  router.push({ name: 'goods-detail', params: { id } })
}

function onTabChange() {
  // 切换tab时可根据实际需求加载不同数据
  // goodsList.value = ...
  finished.value = false
}

function onLoad() {
  loading.value = true
  setTimeout(() => {
    // 模拟加载更多
    const baseId = goodsList.value.length + 1
    const newItems = Array.from({ length: 6 }, (_, i) => ({
      id: baseId + i,
      img: 'https://img.yzcdn.cn/vant/cat.jpeg',
      title: `商品${baseId + i}`,
      price: +(Math.random() * 10 + 1).toFixed(2),
      stock: Math.floor(Math.random() * 100),
      sales: Math.floor(Math.random() * 1000),
      discount: `${Math.floor(Math.random() * 5) + 6}折`,
    }))
    goodsList.value.push(...newItems)
    loading.value = false
    if (goodsList.value.length > 30) finished.value = true
  }, 800)
}
</script>

<style scoped>
.goods-container {
  min-height: 100vh;
  background: #f7f7fa;
  display: flex;
  flex-direction: column;
}
.tabs-fixed {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.goods-scroll-area {
  flex: 1;
  overflow-y: auto;
  height: calc(100vh - 60px);
  -webkit-overflow-scrolling: touch;
  background: #f7f7fa;
}
.goods-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px;
}
.goods-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3/4;
  display: flex;
  flex-direction: column;
}
.goods-img-box {
  width: 100%;
  height: 65%;
  position: relative;
  background: #f5f5f5;
}
.goods-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 10px 10px 8px 10px;
}
.goods-title {
  font-size: 15px;
  font-weight: 500;
  color: #222;
  margin-bottom: 6px;
  line-height: 1.2;
  min-height: 1.5em;
}
.goods-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.goods-price {
  color: #ee0a24;
  font-size: 18px;
  font-weight: bold;
}
.goods-sales {
  font-size: 13px;
  color: #b0b0b0;
  margin-left: 4px;
}
.goods-tags-row {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.goods-tag {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 500;
  display: inline-block;
}
.goods-tag.quality {
  background: #222;
  color: #fff;
}
.goods-tag.stock {
  background: #19be6b;
  color: #fff;
}
.goods-tag.count {
  background: #ff7043;
  color: #fff;
}
</style>






<script setup lang="ts">
</script>













<route lang="json5">
{
  name: 'goods',
  meta: { title: '商品', i18n: 'layouts.goods' }
}
</route> 